<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .box{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 50px;
        }

        .footer{
            height: 2000px;
            background-color: #333;
        }
        /* `E:target` 结合锚点进行使用，处于当前锚点的元素会被选中 */
        .box:target{
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 锚点 -->


    <div id="d1" class="box">

    </div>
    <div id="d2" class="box">

    </div>


    <!-- 可以跳转  地址 (网址) -->
    <!-- 也可以 跳转 页面的 任意元素所在的位置  (#id) -->
    <a href="#d2">跳转d2</a>
    <a href="#d1">跳转d1</a>

    <!-- 那么  d2元素 就 称之为  锚点 -->


    <div class="footer">

    </div>
</body>
</html>